import Panel from "./../../elements/Panel";
import Header from "./../../components/Header";
import Modal from "./../../components/Modal/";
import {connect} from "react-redux";
import CONFIG from "./../../libs/config";
import {URL} from "./../../libs/Url";
import Fetch from "./../../libs/fetch";
import Label from "./../../components/FormLabel";
import FormGroup from "./../../components/FormGroup";
import FormItem from "./../../components/FormItem";
import FormItemType from "./../../components/FormItemType";
import InputGroup from "./../../components/InputGroup";
import Selected from "./../../components/SelectItem";
import BreadcrumbNavigation from "./../../components/BreadcrumbNavigation";
import {fetch, setArgumentItem} from "../../actions";
import {SUBJECT, PAGE_SUBJECT} from "./../../actions/subject";


const AddNews = React.createClass({
    getInitialState(){

        const self = this;
        this.isUpdate = this.props.router.params.id;
        this.form = [
            {
                name: 'classname',
                label: '班级名称',
                value: '',
                tips: '',
                inits: [],
                type: FormItemType.TEXT_SHOW,
                onchange: function (index, content) {
                    self.setState({
                        form: [
                            ...self.state.form.slice(0, index),
                            Object.assign({}, self.state.form[index], {
                                value: content,
                                tips: content.length ? '' : '该项必填',
                            }),
                            ...self.state.form.slice(index + 1),
                        ]
                    });
                }
            },
            {
                name: 'name',
                label: '姓名',
                value: '',
                tips: '',
                required: true,
                inits: [],
                onchange: function (index, content) {
                    self.setState({
                        form: [
                            ...self.state.form.slice(0, index),
                            Object.assign({}, self.state.form[index], {
                                value: content,
                                tips: content.length ? '' : '该项必填',
                            }),
                            ...self.state.form.slice(index + 1),
                        ]
                    });
                }
            },
            {
                name: 'gender',
                label: '性别',
                placeholder: '',
                value: '',
                required: true,
                tips: '',
                type: FormItemType.RADIO,
                onchange: function (index, content) {
                    if (self.state.form[index].value == content)return;
                    self.setState({
                        form: [
                            ...self.state.form.slice(0, index),
                            Object.assign({}, self.state.form[index], {
                                value: content,
                                tips: content.length ? '' : '该项必填',
                            }),
                            ...self.state.form.slice(index + 1),
                        ]
                    });
                }
            },
            {
                name: 'number',
                label: '学号',
                placeholder: '',
                required: true,
                value: '',
                tips: '',
                onchange: function (index, content) {
                    self.setState({
                        form: [
                            ...self.state.form.slice(0, index),
                            Object.assign({}, self.state.form[index], {
                                value: content,
                                tips: content.length ? '' : '该项必填',
                            }),
                            ...self.state.form.slice(index + 1),
                        ]
                    });
                }
            },
            {
                name: 'title',
                label: '班团干部',
                placeholder: '',
                value: '',
                tips: '',
                onchange: function (index, content) {
                    self.setState({
                        form: [
                            ...self.state.form.slice(0, index),
                            Object.assign({}, self.state.form[index], {
                                value: content,
                                tips: content.length ? '' : '该项必填',
                            }),
                            ...self.state.form.slice(index + 1),
                        ]
                    });
                }
            },
            // {
            //     name: 'comment',
            //     label: '备注',
            //     placeholder: '',
            //     value: '',
            //     type: FormItemType.TEXT_AREA,
            //     tips: '',
            //     onchange: function (index, content) {
            //         self.setState({
            //             form: [
            //                 ...self.state.form.slice(0, index),
            //                 Object.assign({}, self.state.form[index], {
            //                     value: content,
            //                     tips: content.length ? '' : '该项必填',
            //                 }),
            //                 ...self.state.form.slice(index + 1),
            //             ]
            //         });
            //     }
            // },

        ];
        this.isUpdate = this.props.router.params.id ? true : false;
        return {
            open: false,
            selected: '',
            form: this.isUpdate ? [] : this.form,
            tips: {}
        }
    },
    setchange(index, content){
        const self = this;
        self.setState({
            form: [
                ...self.state.form.slice(0, index),
                Object.assign({}, self.state.form[index], {
                    value: content,
                    tips: content.length ? '' : '该项必填',
                }),
                ...self.state.form.slice(index + 1),
            ]
        })
    },

    componentDidMount() {
        const {dispatch} = this.props, self = this;
        if (this.isUpdate) {
            Fetch(URL.CLASS_STUDENT_GET, {body: {studentid: this.props.router.params.id}})
                .then(res=> {
                    const student = res.student;
                    this.form[1].value = student.name;
                    this.form[2].value = student.gender;
                    this.form[3].value = student.number;
                    this.form[4].value = student.title;
                    self.setState({
                        form: this.form
                    });
                    console.log(res);
                })
                .catch(e=> {
                    console.log(e);
                })
        }

    },
    onsubmit(){
        const {dispatch} = this.props;
        const self = this;
        var form = {};
        self.state.form.forEach((item, index)=> {
            if (item.required && item.value.length == 0) {
                self.setState({
                    form: [
                        ...self.state.form.slice(0, index),
                        Object.assign({}, self.state.form[index], {
                            tips: '该项必填',
                        }),
                        ...self.state.form.slice(index + 1),
                    ]
                })
            } else {
                form[item.name] = item.value
            }
        });
        if (Object.keys(form).length == self.state.form.length) {
            form.classid = this.props['user']['class'][0]['class'].classid;
            if (this.isUpdate) {
                form.studentid = this.props.router.params.id;
            }
            Fetch(this.isUpdate ? URL.CLASS_STUDENT_MODIFY : URL.CLASS_STUDENT_ADD, {body: form})
                .then(res=> {
                    alert('成功!');
                    console.log(res);
                    self.props.router.push(CONFIG.MENUS_ABSOLUTE.CLASS_STUDENTS)

                })
                .catch(e=> {
                    console.log(e);
                    alert('失败!');
                });
        }
    },
    render(){
        const self = this;
        const {dispatch, user} = this.props;
//
        const opt = {
            ['class']: user.class,
        };
        return (
            <div>
                <BreadcrumbNavigation navs={[
                    {url: CONFIG.MENUS_ABSOLUTE.HOME, label: '首页'},
                    {url: CONFIG.MENUS_ABSOLUTE.CLASS_STUDENTS, label: '学生管理'},
                    {label: this.isUpdate ? '编辑学生' : '新建学生'},
                ]}>
                </BreadcrumbNavigation>
                <Panel>
                    <Header>{this.isUpdate ? '编辑学生' : '新建学生'}</Header>
                    <div className="form-horizontal">
                        {
                            self.state.form.map((item, index)=> {
                                if (index == 0) {
                                    item.value = user.class[0] ? user.class[0]['class'].name : '';
                                }
                                if (item.type == FormItemType.RADIO) {

                                    return <FormItem {...item} key={index}>
                                        {
                                            CONFIG.GENDER.slice(1).map(function (item_, index_) {
                                                var checked = item_.value == item.value;
                                                return <label className="radio-inline" key={index_}>
                                                    <input checked={checked} onClick={()=> {
                                                        item.onchange(index, item_.value);
                                                    }} type="radio" name="gender"/>{item_.label}</label>
                                            })
                                        }
                                    </FormItem>
                                } else {
                                    return <FormItem
                                        index={index} {...item}
                                        key={index}></FormItem>
                                }
                            })
                        }
                        <FormGroup>
                            <Label></Label>
                            <InputGroup>
                                <button
                                    onClick={self.onsubmit}
                                    className="btn btn-success"
                                    type="submit">
                                    保存
                                </button>
                            </InputGroup>
                        </FormGroup>
                    </div>
                </Panel>
            </
                div >
        )
    }
});
function select(state) {
    return {
        user: state.user.user,
        [SUBJECT.CLASS_STUDENT_ADD]: state.fetchBySubject[SUBJECT.CLASS_STUDENT_ADD],
        [PAGE_SUBJECT.CLASS_STUDENT_ADD]: state.pageBySubject[PAGE_SUBJECT.CLASS_STUDENT_ADD]
    }
}
export default connect(select)(AddNews)